<template>
	<view>
		<view class="item-box item-box-1">
			<wjf-iconfont code="e60b" size="32" color="#444"></wjf-iconfont>
			<view class="right-box">
				<view class="right-title">
					<text>物业服务</text>
				</view>
				<view class="right-content">
					<text>提供周到及时的物业服务</text>
				</view>
			</view>
		</view>
		<view class="item-box item-box-3">
			<wjf-iconfont code="e65e" size="32" color="#444"></wjf-iconfont>
			<view class="right-box">
				<view class="right-title">
					<text>物流服务</text>
				</view>
				<view class="right-content">
					<text>提供便捷物流服务，及时方便。</text>
				</view>
			</view>
		</view>
		<view class="item-box item-box-4">
			<wjf-iconfont code="e619" size="32" color="#444"></wjf-iconfont>
			<view class="right-box">
				<view class="right-title">
					<text>特色服务</text>
				</view>
				<view class="right-content">
					<text>提供专业服务，助力您的成长发展。</text>
				</view>
			</view>
		</view>
		<view class="item-box item-box-6">
			<wjf-iconfont code="e636" size="32" color="#444"></wjf-iconfont>
			<view class="right-box">
				<view class="right-title">
					<text>服务建议</text>
				</view>
				<view class="right-content">
					<text>提同心共创美好园区，期待您的宝贵建议。</text>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		background-image: url('/static/img/VCG41N1152000664.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		position: relative;
		/* 添加相对定位 */
	}

	.item-box {
		margin: 30rpx 20rpx;
		height: 180rpx;
		border-radius: 16rpx;
		// background-size: cover;
		// /* 或使用 cover 剪裁*/
		// background-repeat: no-repeat;
		// background-position: center;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}

	.item-box-1 {
		background-color: rgba(#f37b1d, 0.8);
		// background-image: url('/static/service-img/back-img-1.png');
	}

	.item-box-3 {
		background-color: rgba(#39b54a, 0.8);
		// background-image: url('/static/service-img/back-img-3.png');
	}

	.item-box-4 {
		background-color: rgba(#a5673f, 0.8);
		// background-image: url('/static/service-img/back-img-4.png');
	}

	.item-box-6 {
		background-color: rgba(#8799a3, 0.8);
		// background-image: url('/static/service-img/back-img-6.png');
	}


	.right-box {
		margin-left: 40rpx;

		.right-title {
			margin-bottom: 20rpx;

			text {
				font-size: 30rpx;
				font-weight: 550;
				color: #111;
			}
		}

		.right-content {
			text {
				font-size: 28rpx;
				color: #333;
			}
		}
	}
</style>